<template>
  <div class="subCateWrap">
    <div class="subCate" >
      <div class="banner"
           :style="`backgroundImage: url('${parentDataToShow.bannerUrl}')`"
      ></div>
      <div class="subCategories">
        <ul class="itemWrap">
          <li class="item" v-for="(item,index) in childDataToShow" :key="index">
            <img :src="item.bannerUrl" alt="">
            <span class="name">{{item.name}}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import PubSub from 'pubsub-js'
  
  export default {
    name:'index',
    data(){
      return{
        toShowIndex: 0
      }
    },
    computed: {
      ...mapState({
        catelist: state => state.categoryList.catelist
      }),
      parentDataToShow(){
        return this.catelist[this.toShowIndex]
      },
      childDataToShow(){
        return this.parentDataToShow.subCateList
      }
    },
    methods:{
    
    },
    mounted(){
      PubSub.subscribe('showSub',(msg,index)=>{
        this.toShowIndex = index
        console.log(this.toShowIndex)
      })
    },
    watch:{
    
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  .subCateWrap
    //background yellow
    width 588px
    height 1148px
    padding 30px 30px 30px 21px
    box-sizing border-box
    .subCate
      width 528px
      height 1088px
      .banner
        height 192px
        box-sizing border-box
        margin-bottom 32px
        background no-repeat url("https://yanxuan.nosdn.127.net/4a2efe27bba0fa5a60750df399423d94.png?imageView&thumbnail=0x196&quality=75")
        background-size 100%
      .subCategories
        height 864px
        .itemWrap
          display flex
          flex-wrap wrap
          .item
            width 144px
            height 216px
            //background: #000
            margin-right 34px
            &:nth-child(3n+0)
              margin-right -10px
            img
              width 100%
              auto
              .name
                text-align: center
            
</style>
